<template>
  <div>
    <el-button type='primary' size='small' @click='add'>新增</el-button>

    <el-table :data='tableData'>
      <el-table-column label='选择水果不重复' prop='value'>
        <template v-slot='scope'>
          <el-select v-model='scope.row.value'>
            <el-option v-for='item in options' :key='item.value' :value='item.value' :label='item.label'
                       :disabled='item.disabled' />
          </el-select>
        </template>
      </el-table-column>
    </el-table>


    <el-select v-model='test' @change='selectChange'   clearable>
      <el-option v-for='item in options2'  :key='item.value' :value='item.value' :disabled = 'item.disabled' :label='item.label' />
    </el-select>

  </div>
</template>

<script>
export default {
  name: 'options',
  data() {
    return {
      tableData: [
        { value: '1' },
        { value: '2' }
      ],
      test: undefined,
      options: [
        { label: '西瓜', value: '1', disabled: true },
        { label: '柠檬', value: '2', disabled: true },
        { label: '葡萄', value: '3', disabled: false },
        { label: '苹果', value: '4', disabled: false },
        { label: '香蕉', value: '5', disabled: false },
        { label: '火龙果', value: '6', disabled: false },
        { label: '凤梨', value: '7', disabled: false }
      ],
      options2: [
        { label: '西瓜', value: '1', disabled: false ,count : 0},
        { label: '柠檬', value: '2', disabled: false ,count : 0},
        { label: '葡萄', value: '3', disabled: false ,count : 0},
        { label: '苹果', value: '4', disabled: false ,count : 0},
      ]
    }
  },
  watch: {
    'tableData': {
      handler(newArr) {
        this.options = this.options.map(item => {
          item.disabled = false
          return item
        })
        newArr.forEach(x => {
          this.options.forEach(y => {
            if (x.value === y.value) {
              y.disabled = true
            }
          })
        })
      },
      deep: true
    }
  },
  methods: {
    add() {
      this.tableData.push({ value: '' })
    },

    selectChange(value) {
      console.log(value)

      if(!value){
        Object.assign(this.$data.options2, this.$options.data.call(this).options2)
        return
      }

      this.options2[value-1].count ++

      if(this.options2[value-1].count === 1){
        console.log('点击一次')
        this.options2.forEach(x => {
          x.disabled = x.value !== value
        })
      }else{
        console.log('点击两次')
        this.options2.forEach(x=>x.disabled = false)
      }
    },

  }
}
</script>

<style scoped>

.el-button {
  float: left;
}

.el-select {
  width: 150px;
  margin: 10px;
}

</style>
